<template>
	<view v-if="readonly" class="search-input bg-2 color-secondary-2 text-center" hover-class="opacity-50" hover-start-time="0" hover-stay-time="0"
		@click="$emit('click')">
		<text class="iconfont icon-search mr-2"></text>
		<text>请输入搜索关键词</text>
	</view>
	<view v-else class="search-input bg-2 flex flex-center">
		<text class="iconfont icon-search mr-2 color-secondary-2"></text>
		<input confirm-type="search" placeholder="请输入搜索关键词" placeholder-style="color: #BDBDBD" class="text-m flex-1" 
			@confirm="$emit('confirm')" v-model="value"/>
	</view>
</template>

<script>
	import { ref,watch } from "vue";
	export default {
		name:"SearchInput",
		emits:['confirm','change','click'],
		props:{
			readonly: Boolean
		},
		setup(props,ctx){
			const value = ref("");
			if(!props.readonly){
				watch(value,(val) => {
					ctx.emit("change",val);
				});
			}
			return {
				value
			};
		}
	}
</script>

<style>
.search-input{
	border-radius: 36rpx;
	font-size: 30rpx;
	padding:16rpx 32rpx;
}
</style>
